<template>
  <div id="tool-wrapper" :style="{ right: isManage ? '1%' : '30%' }">
    <div class="tool-item" v-for="item in tools" :title="item.title" @click="handleTool(item)">
      <a-popover v-if="item.title === '图层控制'" placement="leftTop" trigger="click">
        <template #content>
          <LineController />
        </template>
        <i :class="['iconfont', item.icon, disabled ? 'disabled-icon' : '']"></i>
      </a-popover>
      <i :class="['iconfont', item.icon]" v-else></i>
    </div>
    <!-- <Teleport to="#cesium-viewer">
      <MyPosition  v-if="MousePositionShowed"/>
    </Teleport> -->
  </div>
</template>
  
<script setup>
import { renderAll } from '@/cesiumTools/effectController.js'
import { ref, onMounted } from "vue";
import { watchLineData } from '@/store'
import LineController from './LineController.vue';
// import MyPosition from './MyPosition.vue';
import { fullScreen, cancelFullscreen } from "./toolFunctions";
import PositionInfoStatusBar from "@/cesiumTools/positionStatusBar";

const tools = ref([
  {
    title: '鼠标位置',
    icon: 'metro-zhizhen'
  }, {
    title: '图层控制',
    icon: 'metro-layer'
  }, {
    title: '全屏控件',
    icon: 'metro-quanping_o'
  }
]);

const disabled = ref(false);
const isManage = ref(false)
const MousePositionShowed = ref(false);
const isFullScreen = ref(false);
let positionStatus
onMounted(async () => {
  const viewer = await watchLineData('setViewer')
  const lineData = await watchLineData('setData')
  renderAll(viewer, lineData)
  positionStatus = new PositionInfoStatusBar(viewer);
})

const handleTool = (data) => {
  const { title } = data;
  switch (title) {
    case "全屏控件":
      controlFullScreen();
      break;
    case "鼠标位置":
      controlMouse();
      break;
    default:
      break;
  }
}
const targetEle = document.getElementById("app");
const controlFullScreen = () => {
  isFullScreen.value && cancelFullscreen();
  !isFullScreen.value && fullScreen(targetEle);
  isFullScreen.value = !isFullScreen.value;
};
const controlMouse = () => {
  MousePositionShowed.value ? positionStatus.show() : positionStatus.hide();
  MousePositionShowed.value = !MousePositionShowed.value;
};
</script>
<style scoped>
#tool-wrapper {
  position: absolute;
  right: 30%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  z-index: 199;
}

.tool-item {
  margin: 4px;
  pointer-events: all;
  cursor: pointer;
}

.tool-item:hover {
  background-color: #d8951a7f;
}

#tool-wrapper i {
  color: #ffd31a;
  border: 1px solid #d8951a;
  padding: 3px;
}

#tool-wrapper span {
  color: #fff;
}

.disabled-icon {
  pointer-events: none;
  cursor: none;
  background-color: rgba(204, 204, 204, 0.306);
}

.disabled-icon:hover {
  cursor: none;
}

.ant-popover-inner {
  background-color: rgba(204, 204, 204, 0)
}
</style>
<style>
:where(.css-dev-only-do-not-override-19iuou).ant-popover .ant-popover-inner {
  background-color: rgba(204, 204, 204, 0)
}

.position-info-status-bar {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: #111;
  border: 1px solid #fff;
}

.position-info-status-bar-text {
  color: #fff;
  font-size: 14px;
  padding: 5px;
  width: 150px;
  border: 1px solid #fff;
}
</style>